<template>
	<view class="page">
		<navCom title="个人信息"></navCom>
		<view class="section_4 flex-au">
			<view>
				<view class="box_9 flex-au">
					<view class="image-wrapper_1 flex-col">
						<image class="label_1" referrerpolicy="no-referrer" :src="api_host + userProfile.userAvatar" />
					</view>
				</view>
				<view class="box_10">
					<u-button type="" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
						:customStyle="{'width':'100%'}" @click="selectAvatar">上传头像</u-button>
				</view>
			</view>
		</view>
		<view class="group_2">
			<view class="image-text_13 flex-row">
				<image class="label_9" referrerpolicy="no-referrer" src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/photo.png" />
				<text class="text-group_1 ml10">生活近照</text>
			</view>
			<view class="scroll-view_box mt20">
				<uploadImg :imgList="imgList" @imgListChange="getImgList"></uploadImg>
			</view>
			<view class="box_11 flex-row">
				<image class="label_10" referrerpolicy="no-referrer" src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/jbxx.png" />
				<text class="text_4 ml10">基本信息</text>
			</view>
			<view class="box_12 flex-row justify-between">
				<text class="text_28">昵称</text>
				<view class="image-text_14 flex">
					<input type="nickname" v-model="userProfile.nickName" placeholder="请输入昵称" class="textR">
					<u-icon name="arrow-right" color="#333" size="14"></u-icon>
				</view>
			</view>
			<view class="box_13 flex justify-between">
				<text class="text_29">身高</text>
				<view class="image-text_15 flex">
					<input type="number" v-model="userProfile.height" placeholder="请输入身高" class="textR">
					<text class="f24 c999 ml10 mr10">cm</text>
					<u-icon name="arrow-right" color="#333" size="14"></u-icon>
				</view>
			</view>
			<view class="box_14 flex justify-between">
				<text class="text_30">体重</text>
				<view class="image-text_16 flex">
					<input type="number" v-model="userProfile.weight" placeholder="请输入体重" class="textR">
					<text class="f24 c999 ml10 mr10">kg</text>
					<u-icon name="arrow-right" color="#333" size="14"></u-icon>
				</view>
			</view>
			<view class="box_15 flex justify-between">
				<text class="text_31">学历</text>
				<view class="image-text_17 flex">
					<!-- <text class="text-group_16">{{userProfile.edu || '请选择学历'}}</text> -->
					<input type="text" v-model="userProfile.edu" placeholder="请输入学历" class="textR">
					<u-icon name="arrow-right" color="#333" size="14"></u-icon>
				</view>
			</view>
			<view class="box_15 flex justify-between">
				<text class="text_31">工作单位</text>
				<view class="image-text_17 flex">
					<!-- <text class="text-group_16">{{userProfile.edu || '请选择学历'}}</text> -->
					<input type="text" v-model="userProfile.jobUnit" placeholder="请输入工作单位" class="textR">
					<u-icon name="arrow-right" color="#333" size="14"></u-icon>
				</view>
			</view>
			<view class="box_15 flex justify-between">
				<text class="text_31">工作区域</text>
				<view class="image-text_17 flex flex1 ml10">
					<!-- <text class="text-group_16">{{userProfile.edu || '请选择学历'}}</text> -->
					<input type="text" v-model="userProfile.jobAddress" placeholder="请输入/选择工作区域" class="textR flex1">
					<view @click="chooseAddress">
						<u-image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/map.png" width="20" height="20"></u-image>
					</view>
				</view>
			</view>
			<view class="box_15 flex justify-between">
				<text class="text_31">婚姻状况</text>
				<view class="image-text_17 flex">
					<!-- <text class="text-group_16">{{userProfile.edu || '请选择学历'}}</text> -->
					<input type="text" v-model="userProfile.marryCert" placeholder="请输入婚姻状况" class="textR">
					<u-icon name="arrow-right" color="#333" size="14"></u-icon>
				</view>
			</view>
		</view>
		<view class="section_5 flex-col">
			<view class="block_7 flex-row">
				<view class="image-text_18 flex-row justify-between">
					<image class="label_11" referrerpolicy="no-referrer" src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/gxbq.png" />
					<text class="text-group_6">个性标签</text>
				</view>
			</view>
		</view>
		<!-- 引入tagList组件 -->
		<view class="m30">
			<TagList :key="tagListKey" :initialSelectedLabels="userProfile.labels" :tagData="tagCategories"
				:loading="tagLoading" @selected-labels-change="handleSelectedLabelsChange" />
		</view>
		<view class="flex-au m30">
			<u-button type="" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
				:customStyle="{'width':'100%','height':'80rpx'}" @click="saveFilters">提交</u-button>
		</view>
		<u-gap height="20"></u-gap>
	</view>
</template>
<script>
	import navCom from '@/components/nav/nav.vue';
	import uploadImg from '@/components/upload/upload.vue';
	import TagList from '@/components/tagList/index.vue'
	import {
		getPersonInfo,
		updateUser,
		deleteUserFilter
	} from '@/common/api_meethuangshi.js'
	export default {
		components: {
			navCom,
			uploadImg,
			TagList
		},
		data() {
			return {
				userProfile: {},
				imgList: [],
				tagListKey: 0, // 用于强制TagList组件重新渲染
				tagCategories: [], // 标签数据
				tagLoading: false, // 标签数据加载状态
				tagError: null // 标签数据加载错误
			};
		},
		onLoad() {
			//this.getPersonInfo();
			this.fetchTagCategories(this.userId);
		},
		methods: {
			async getPersonInfo() {
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				const res = await getPersonInfo({
					userId: userId
				})
				this.userProfile = res.data;
				this.imgList = this.userProfile.recentPhoto?this.userProfile.recentPhoto.split(','):[];
				console.log('this.imgList',this.imgList);
			},
			getImgList(data){
				this.imgList = data;
			},
			selectAvatar() {
			    // 模拟头像选择，实际项目中可以调用相册选择或其他选择方式
			    uni.chooseImage({
			        count: 1,
			        sourceType: ['album', 'camera'],
			        success: async(res) => {
			            const res1 = await this.$utils.uploadFile(res.tempFilePaths[0])
			            console.log(res1, 'resres')
			            if (res1.code == 200) {
			                this.userProfile.userAvatar = res1.fileName
			            } else {
			                this.userProfile.userAvatar = ''
			            }
			            uni.showToast({
			                title: '头像选择成功',
			                icon: 'success',
			                duration: 1500
			            });
			        },
			        fail: (err) => {
			            console.log('选择头像失败:', err);
			        }
			    });
			},
			// 处理来自TagList组件的选中标签变化
			handleSelectedLabelsChange(selectedLabels) {
				this.userProfile.labels = selectedLabels
				console.log('父组件接收到选中标签变化:', this.userProfile.labels)
			},
			chooseAddress(){
				const that = this;
				uni.chooseLocation({
					success(res) {
						console.log(res);
						const {
							address,
							name,
							latitude,
							longitude
						} = res;
						that.userProfile.jobAddress = name;
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			// 统一的选项选择方法
			selectOption(type, value) {
				// 如果已选中相同值，则取消选择
				this.userProfile[type] = this.userProfile[type] === value ? '' : value
				console.log(`选中${type}:`, this.userProfile[type])
			},
			// 重置筛选条件
			async resetFilters() {
				this.userProfile = {
					userId: '',
					startYear: 18,
					endYear: 18,
					sex: '', // 选中的性别
					idCert: '', // 选中的认证情况
					tag: '',
					labels: [] // 已选择的标签
				}
				this.tagListKey++ // 强制TagList组件重新渲染
				console.log('重置筛选条件')
				await deleteUserFilter({
					userId: this.userId
				})
				this.$emit('updateList')
			},
			// 保存筛选条件并传递给父组件
			async saveFilters() {
				let data = {
					tag:'',
					nickName:this.userProfile.nickName,
					height:this.userProfile.height,
					weight:this.userProfile.weight,
					edu:this.userProfile.edu,
					userAvatar:this.userProfile.userAvatar,
					recentPhoto:this.imgList.join(','),
					userId:this.userProfile.userId,
					marryCert:this.userProfile.marryCert,
					jobUnit:this.userProfile.jobUnit,
					jobAddress:this.userProfile.jobAddress
				};
				// 克隆表单数据，避免引用传递问题
				if (this.userProfile.labels?.length) {
					data.tag = this.userProfile.labels.map(item => item.id).join(',')
				}
				console.log('data',data);
				const filterData = JSON.parse(JSON.stringify(data))
				const res = await updateUser(filterData)
				if (res.code == 200) {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
				}
			},
			// 获取标签数据
			async fetchTagCategories() {
				const userId = await this.getUserId()
				this.tagLoading = true;
				this.tagError = null;
				try {
					const res = await getPersonInfo({
						userId
					});
					console.log('获取标签数据:', res);
					if (res.code === 200 && res.data) {
						// 确保数据是数组格式并过滤无效数据
						this.userProfile = res.data;
						this.imgList = this.userProfile.recentPhoto?this.userProfile.recentPhoto.split(','):[];
						if (!this.userProfile.sex) {
							this.userProfile.sex = ''
						}
						if (!this.userProfile.idCert) {
							this.userProfile.idCert = 0
						}
						const rawData = Array.isArray(res.data.userInfoTagList) ? res.data.userInfoTagList : [];
						this.tagCategories = this.filterValidCategories(rawData);
						console.log('过滤后的标签数据:', this.imgList);
					} else {
						this.tagCategories = []; // 确保失败时也设置为空数组
						this.tagError = res.message || '标签加载失败';
						// uni.showToast({
						//     title: res.message || '标签加载失败',
						//     icon: 'none'
						// });
					}
				} catch (error) {
					console.error('获取标签列表失败:', error);
					this.tagCategories = []; // 确保异常时也设置为空数组
					this.tagError = '标签加载失败';
					uni.showToast({
						title: '标签加载失败',
						icon: 'none'
					});
				} finally {
					this.tagLoading = false;
				}
			},
			// 过滤有效的分类数据
			filterValidCategories(categories) {
				if (!Array.isArray(categories)) {
					return [];
				}
				return categories.filter(category => {
					if (!category || typeof category !== 'object') {
						return false;
					}
					// 确保分类有基本信息
					if (!category.tagName || typeof category.tagName !== 'string') {
						return false;
					}
					// 如果有子标签，过滤子标签
					if (category.sonTagObj) {
						category.sonTagObj = this.getValidTags(category.sonTagObj);
					}
					return true;
				});
			},
			// 过滤有效的标签数据
			getValidTags(sonTagObj) {
				if (!Array.isArray(sonTagObj)) {
					return [];
				}
				return sonTagObj.filter(tag => {
					return tag &&
						typeof tag === 'object' &&
						tag.tagName &&
						typeof tag.tagName === 'string' &&
						tag.tagName.trim() !== '';
				});
			}
		},
	};
</script>
<style lang="scss">
	@import '@/common/reset.css';

	.page {
		background-color: rgba(247, 246, 255, 1);
		position: relative;
	}

	.section_4 {}

	.box_7 {
		margin: 0 27px 0 37px;
	}

	.text_26 {
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 17px;
		font-family: SFPro-Semibold;
		font-weight: 600;
		text-align: right;
		white-space: nowrap;
		line-height: 22px;
	}

	.thumbnail_10 {
		width: 19px;
		height: 12px;
		margin: 5px 0 5px 182px;
	}

	.thumbnail_11 {
		width: 17px;
		height: 12px;
		margin: 5px 0 5px 8px;
	}

	.image_7 {
		width: 27px;
		height: 13px;
		margin: 5px 0 4px 7px;
	}

	.box_8 {
		width: 378px;
		margin-top: 13px;
	}

	.image_2 {
		width: 87px;
		height: 32px;
	}

	.text_27 {
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 17px;
		font-family: SFProDisplay-Medium;
		font-weight: 500;
		text-align: right;
		white-space: nowrap;
		line-height: 20px;
		margin-top: 4px;
	}

	.image_3 {
		width: 87px;
		height: 32px;
	}

	.box_9 {
		margin-top: 23px;
	}

	.image-wrapper_1 {}

	.label_1 {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.box_10 {
		width: 134px;
		align-self: center;
		margin-top: 16px;
	}

	.text-wrapper_1 {
		background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPnge24cda6527344c34e395dff051540546e00a682ca86fe69ad7f5aa56fa57d37f) 100% no-repeat;
		background-size: 100% 100%;
		padding: 13px 35px 13px 35px;
	}

	.text_3 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: right;
		white-space: nowrap;
		line-height: 22px;
	}

	.group_2 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 20px;
		margin: 30rpx;
		padding: 30rpx;
	}

	.image-text_13 {}

	.label_9 {
		width: 24px;
		height: 24px;
	}

	.text-group_1 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 16px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 22px;
		margin-top: 1px;
	}

	.image-wrapper_3 {
		width: 327px;
		height: 76px;
		margin: 8px 3px 0 0;
	}

	.image_4 {
		width: 76px;
		height: 76px;
		margin-right: 7px;
	}

	.box_11 {
		margin: 20px 0 0 0;
	}

	.label_10 {
		width: 24px;
		height: 24px;
	}

	.text_4 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 16px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 22px;
		margin-top: 1px;
	}

	.box_12 {
		margin-top: 19px;
	}

	.text_28 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.image-text_14 {}

	.text-group_13 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 20px;
	}

	.thumbnail_12 {
		width: 16px;
		height: 16px;
		margin: 2px 0 2px 0;
	}

	.box_13 {
		margin-top: 26px;
	}

	.text_29 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.image-text_15 {}

	.text-group_14 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 20px;
	}

	.thumbnail_13 {
		width: 16px;
		height: 16px;
		margin: 2px 0 2px 0;
	}

	.box_14 {
		margin-top: 26px;
	}

	.text_30 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.image-text_16 {}

	.text-group_15 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 20px;
	}

	.thumbnail_14 {
		width: 16px;
		height: 16px;
		margin: 2px 0 2px 0;
	}

	.box_15 {
		margin-top: 26px;
	}

	.text_31 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.image-text_17 {}

	.text-group_16 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 20px;
	}

	.thumbnail_15 {
		width: 16px;
		height: 16px;
		margin: 2px 0 2px 0;
	}

	.section_5 {
		margin: 30rpx;
	}

	.block_7 {}

	.image-text_18 {}

	.label_11 {
		width: 24px;
		height: 24px;
	}

	.text-group_6 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 16px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 22px;
		margin-top: 1px;
	}

	.group_5 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 20px 20px 0px 0px;
		padding: 30rpx;
	}

	.block_8 {
		margin-bottom: 40rpx;
	}

	.image-text_19 {}

	.label_12 {
		width: 24px;
		height: 24px;
		align-self: center;
	}

	.text-group_7 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 18px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 25px;
		margin-top: 4px;
	}

	.group_19 {
		margin-left: 40rpx;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #eee;
	}

	.text-wrapper_19 {
		background-color: rgba(52, 49, 79, 0.06);
		padding: 8px 0 8px 0;
		width: 31%;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		border: 1px solid transparent;
		border-radius: 50px;
		position: relative;
	}

	// .text-wrapper_19::before{
	// 	content: "";
	// 	position: absolute;
	// 	left: -20px;
	// 	top: 0;
	// 	width: 100%;
	// 	height: 100%;
	// 	border: 1px solid transparent;
	// 	border-image-slice: 1;
	// 	border-image: linear-gradient(170deg, #FFA5F5, #319EFF);
	// 	z-index: 9999;
	// }
	.text_32 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_20 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		padding: 8px 26px 8px 26px;
	}

	.text_33 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_21 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		padding: 8px 26px 8px 26px;
	}

	.text_34 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.section_7 {
		width: 298px;
		margin-top: 8px;
	}

	.text-wrapper_22 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		padding: 8px 26px 8px 26px;
	}

	.text_35 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_6 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 14px;
		border: 2px solid;
		padding: 6px 24px 6px 24px;
	}

	.text_13 {
		overflow-wrap: break-word;
		color: rgba(49, 158, 255, 1);
		font-size: 14px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_23 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		padding: 8px 26px 8px 26px;
	}

	.text_36 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.block_9 {
		margin: 16px 0 0 0;
	}

	.image-text_20 {}

	.thumbnail_16 {
		width: 16px;
		height: 16px;
	}

	.text-group_8 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 12px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 16px;
	}

	.block_10 {
		margin: 12px 0 0 58px;
	}

	.section_3 {
		background-color: rgba(52, 49, 79, 0.08);
		width: 316px;
		height: 1px;
	}

	.block_11 {
		width: 342px;
		margin: 28px 32px 0 0;
	}

	.image-text_21 {
		margin-bottom: 27px;
	}

	.label_13 {
		width: 24px;
		height: 24px;
		align-self: center;
	}

	.text-group_9 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 18px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 25px;
		margin-top: 4px;
	}

	.group_20 {}

	.block_12 {
		width: 284px;
	}

	.text-wrapper_24 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		padding: 8px 26px 8px 26px;
	}

	.text_37 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_25 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		padding: 8px 26px 8px 26px;
	}

	.text_38 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_26 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		padding: 8px 26px 8px 26px;
	}

	.text_39 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.block_13 {
		width: 270px;
		margin: 8px 14px 0 0;
	}

	.text-wrapper_27 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		padding: 8px 26px 8px 26px;
	}

	.text_40 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_12 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 14px;
		border: 2px solid;
		padding: 6px 24px 6px 24px;
	}

	.text_19 {
		overflow-wrap: break-word;
		color: rgba(49, 158, 255, 1);
		font-size: 14px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_28 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		padding: 8px 26px 8px 26px;
	}

	.text_41 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.block_14 {
		margin: 16px 16px 0 300px;
	}

	.image-text_22 {
		width: 58px;
	}

	.thumbnail_17 {
		width: 16px;
		height: 16px;
	}

	.text-group_10 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 12px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 16px;
	}

	.block_15 {
		margin: 12px 0 0 58px;
	}

	.box_6 {
		background-color: rgba(52, 49, 79, 0.08);
		width: 316px;
		height: 1px;
	}

	.block_16 {
		width: 310px;
		margin: 28px 64px 0 0;
	}

	.image-text_23 {
		margin-bottom: 71px;
	}

	.label_14 {
		width: 24px;
		height: 24px;
		align-self: center;
	}

	.text-group_11 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 18px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 25px;
		margin-top: 4px;
	}

	.grid_2 {
		width: 252px;
		height: 124px;
		flex-wrap: wrap;
	}

	.text-wrapper_29 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		height: 36px;
		width: 122px;
		margin: 0 8px 8px 0;
		padding: 8px 26px 8px 26px;
	}

	.text_42 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_30 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		height: 36px;
		margin-bottom: 8px;
		width: 122px;
		padding: 8px 26px 8px 26px;
	}

	.text_43 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_31 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		height: 36px;
		width: 122px;
		margin: 0 8px 8px 0;
		padding: 8px 26px 8px 26px;
	}

	.text_44 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_32 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		height: 36px;
		margin-bottom: 8px;
		width: 112px;
		padding: 8px 26px 8px 26px;
	}

	.text_45 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.text-wrapper_33 {
		background-color: rgba(52, 49, 79, 0.06);
		border-radius: 14px;
		height: 36px;
		margin-right: NaNpx;
		margin-bottom: 8px;
		width: 122px;
		padding: 8px 26px 8px 26px;
	}

	.text_46 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
	}

	.block_17 {
		margin: 16px 16px 0 300px;
	}

	.image-text_24 {
		width: 58px;
	}

	.thumbnail_18 {
		width: 16px;
		height: 16px;
	}

	.text-group_12 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 12px;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 16px;
	}

	.block_18 {
		margin: 12px 0 0 58px;
	}

	.group_18 {
		background-color: rgba(52, 49, 79, 0.08);
		width: 316px;
		height: 1px;
	}
</style>